{% extends "pages-base.html" %}

{% block content %}

<div class="row">
    <div class="col-md-12">
        <div id="cmdb-group-panel-ref" class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">主机组</h3>
            </div>
            <div class="panel-body">
                <button data-target="#cmdb-addgroup-modal" data-toggle="modal" class="btn btn-primary btn-lg">
                    添加主机组
                </button>
            </div>
            <!--===================================================-->
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="t1">
                        <thead>
                        <tr>
                            <th>组名</th>
                            <th>描述</th>
                            <th>主机数</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="cmdb-group-databody">
                        {% for hg in allHostGroup reversed %}
                        <tr groupid="{{ hg.id }}">
                            <td><a class="btn-link">{{ hg.hostGroupName }}</a></td>
                            <td>{{ hg.hostGroupDes }}</td>
                            <td><span class="badge badge-primary">{{ hg.hostsNum }}</span></td>
                            <td>
                                <button class="btn btn-danger cmdb-groups-delbtn">删除</button>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <!--===================================================-->
            <!-- End Striped Table -->

        </div>
    </div>
</div>

<div class="modal fade" id="cmdb-addgroup-modal" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!--Modal header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><i class="pci-cross pci-circle"></i></button>
                <h4 class="modal-title">添加主机组</h4>
            </div>
            <!--Modal body-->
            <div class="modal-body">
                <!-- BASIC FORM ELEMENTS -->
                <!--===================================================-->
                <form class="panel-body form-horizontal form-padding">
                    <!--Text Input-->
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="cmdb-addgroup-input">组名</label>
                        <div class="col-md-9">
                            <input type="text" id="cmdb-addgroup-input" class="form-control" placeholder="Groupname">
                            <!--<small class="help-block">This is a help text</small>-->
                        </div>
                    </div>
                    <!--Textarea-->
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="cmdb-addgroup-desc">描述</label>
                        <div class="col-md-9">
                            <textarea id="cmdb-addgroup-desc" rows="9" class="form-control"
                                      placeholder="Your group description here.."></textarea>
                        </div>
                    </div>
                </form>
                <!--===================================================-->
                <!-- END BASIC FORM ELEMENTS -->
            </div>
            <!--Modal footer-->
            <div class="modal-footer" id="cmdb-groups-save-btn">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>



{% endblock %}


{% block js %}
<script src="/static/js/cmdb-groups.js"></script>
{% endblock %}